/*  头部导航*/
.header{
    background-color: #333;
    padding: 1em 0;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    font-size: 1.3em;

    .navbar{
        background-color: transparent;
        border: 0;
        border-radius: 0;
        margin: 0;

        .container{

            width: 80%;

            .navbar-brand{
                font-size: 1.8em;
                color: white;
                font-family: '宋体';
                font-weight: 900;

                .red{
                    color: red;
                }
            }

            .navbar-collapse{
                overflow-x: hidden;
                .nav{
                    a{
                        text-align: center;
                        color: white;
                        border-bottom: 3px solid transparent;
                        transition: all linear 0.3s;
                        margin: 0px 0.5em;
            
                        &:hover{
                            border-bottom: 3px solid #fcac45;
                        }
                    }
                        
                }

            }     

        }
    }

}

/*  背景图*/
.bjt{
    background: url(../images/map.jpg) no-repeat center center;
    background-size: cover;
    width: 100vw;
    height: 25em;
}

/*  详情*/
.main{
    width: 100%;
    padding: 2em;
    background: url(../images/bjtp1.gif) no-repeat center center;
    background-size: cover;

    .wrap{
        width: 100%;
        height: 100%;
        color: white;
        
        .section{
            width: 100%;
            height: 100%;
            margin-bottom: 5em;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;

            .col_1_of_3{
                width: 30%;
                height: 100%;
                box-shadow: 0px 0px 10px 5px #ececec;
                border-radius: 10px;
                overflow: hidden;
                padding: 0px 0px 0.5em;
                transition: all 0.3s;
                margin: 2em 0px;

                img{
                    width: 100%;
                }

                &:hover{
                    box-shadow: 0px 0px 12px 10px #cccccc;
                }

                .m_fb{
                    .middle{
                        font-size: 1.1em;

                        &:hover{
                            color: brown;
                            cursor: pointer;
                        }
                    }
                }


                .desc{
                    
                    .ok2{
                        text-align: center;
                    }
                    .m_2{
                        font-size: 1em;
                        font-weight: 900;
                        text-align: center;

                        &:hover{
                            cursor: pointer;
                            color: #cccccc
                        }
                    }

                    .ok{
                        text-align: center;
                        margin: 0.5em 0px;
                    }
                }

                .example{
                    display: flex;
                    width: 100%;
                    justify-content: space-around;

                    .col_1_of_2{
                        width: 45%;
                        text-align: center;
                        background-color: #cccccc;
                        border-radius: 10px;
                        cursor: pointer;

                        &:hover{
                            background-color: #ececec;
                            color: #333333;
                        }
                    }
                }

            }
        }


    }
}

/*  底部*/
.footer{
    background-color: #222222;
    padding: 3em 0;

    .box{
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;

        .copyright{
            font-family: OSLight;
            font-size: 1.2em;
            color: #b2b2b2;
            text-transform: uppercase;
            font-weight: bold;

            span{
                font-family: OSBold;
            }
        }

        .list{
            display: flex;
            justify-content: space-around;
            width: 25%;

            a{
                border: 2px solid #cccccc;
                border-radius: 50%;
                transition: all linear 0.3s;
                padding: 0.3em;
                margin: 0px 0.3em;
                background-color: #ececec;

                img{
                    width: 100%;
                }

                &:hover{
                    box-shadow: 0px 0px 10px #b2b2b2;
                }
            }
        }
    }

    @media screen and (max-width:1000px) {
        & .box {
            flex-wrap: wrap;
            
            .copyright{
                width: 100%;
                text-align: center;
                margin-bottom: 2em;
            }

            .list{
                width: 40%;
                margin: 0 auto;
            }
        }
        
    }

    @media screen and (max-width:684px){
        & .box{


            .list{
                width: 54%;
            }
        }
    }

    @media screen and (max-width:500px){
        & .box{
            .copyright{
                font-size: 1em;
            }

            .list{
                width: 72%;
            }
        }
    }

    @media screen and (max-width:380px){
        & .box .copyright{
                font-size: 0.8em;
            }
    }

}


.header{

    @media screen and (max-width:874px){
        font-size: 1em;
    }

    
}

.main{
    @media screen and (max-width:768px){
        & .wrap{

            .section{

                .col_1_of_3{
                    width: 45%;
                }
            } 
        } 
    }

    @media screen and (max-width:510px){
        & .wrap{

            .section{

                .col_1_of_3{
                    width: 80%;
                }
            } 
        } 
    }
}